<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>article</title>
    <link rel="icon" href="/img/TIM截图20190121225434.png" >
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/read/main.css">
    <link rel="stylesheet" type="text/css" href="../css/read/article.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    
    <script type="text/javascript" src="/js/read/commons.js"></script>
    <script src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/framework/vue.js"></script>
    <script type="text/javascript" src="/js/framework/jquery-3.2.1.min.js"></script>

</head>
<body>
    
    <div class="header">
          <h1 class="logo">
            <a href="index.html">
              <span >-001</span>
            </a>
          </h1>
          <div class="nav">
            <a href="/index.html">首页</a>
            <a href="/html/article.html" class="active">文章</a>
            <a href="/html/archive.html">归档</a>
            <a href="/html/about.html">关于</a>
          </div>
          <ul class="layui-nav header-down-nav">
            <li class="layui-nav-item"><a href="/index.html">首页</a></li>
            <li class="layui-nav-item"><a href="/html/article.html" class="active">文章</a></li>
            <li class="layui-nav-item"><a href="/html/archive.html">归档</a></li>
            <li class="layui-nav-item"><a href="/html/about.html">关于</a></li>
          </ul>

    </div>
    <div class="article-banner">

    </div>

    <div class="article-content">

          
      <div id="article" class="category-content">
        <div class="cont w1000">
                <!-- {{ msg }} -->
          <div v-for="article in articles">
              <div class="article">
                  <div class="img c-img"><img :src="article.img" alt="-001"></div>
                    <!-- {{ msg }}  ++ -->
                    <div class="item-cont">
                      <h3>
                        {{ article.title }}
                      </h3>
                      <h5 class="h5">
                            {{ article.publishTime }} 
                      </h5>
                      <h5>
                        {{ article.label }}  {{ article.label }}  {{ article.label }} {{ article.label }} 
                      </h5>
                      
                      <br>
                      <p @click="jumpreadmd(article.id)">{{ article.content }}</p>
                      <!-- <a href="#" class="go-icon" @click="jumpreadmd(article.title)"></a> -->
                    </div>

                </div>
                  
              </div>
          </div>
        </div>



    <div id="page">
    </div>
    </div>



    
    <div class="footer-a">
        <div class="text">
            <h4 class="title">-001&nbsp一片秋叶个人笔记</h4>
            <p>v2.0&nbsp&nbsp<span class="WeChat"> redwys.xyz 桂ICP备18004478号-1&nbsp&nbsp©</span></p>
        </div>
    </div>

    <script>

    // 数据加载
    $(function () {
        var category = localStorage.getItem("category");
        // 先判断是不是有从首页分类点进来的  不是就不执行这个分类的分页获取
        if (category == "") {
            return;
        }
        console.log(category);
        console.log(101);
           $.ajax({
              url:config.url.get_article_page+"/1/10",
              type:'GET',
              contentType:'application/json; charset=UTF-8',
              success:function (article) {
                //   articleVue.articles = article.data;
              },
              error: function() {
                  console.log("服务器获取失败");
              }
          });

      });
    
    // vue
    var articleVue = new Vue({
          el: '#article',
          data: {
            //   msg: "暂无数据",
              articles: [
                  
            ],
          },
          methods: {
              jumpreadmd: function (blogtitle) {
                  
                  // 拿到的字符串前面有空格，不懂
                  // blogtitle = blogtitle.replace(/(^\s*)/g, "");   // 去除前面的空格

                  localStorage.setItem("blogtitle", blogtitle);
                  window.location.href = "/html/read.html";

              }
          }
      });
    
    // 分页请求函数
    function page(curr, limit) {
        $.ajax({
              url:config.url.get_article_page+"/"+curr+"/"+limit,
              type:'GET',
              contentType:'application/json; charset=UTF-8',
              success:function (article) {
                  articleVue.articles = article.data;
              },
              error: function() {
                  console.log("服务器获取失败");
              }
          });
    }

    // 分页
    layui.use('laypage', function(){
        var laypage = layui.laypage;
        laypage.render({
        elem: 'page',
        theme: "#ff7f21",
        limit: 5,
        count: 50, //数据总数，从服务端得到   todo 需要改变
        jump: function(obj, first){
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数
            page(obj.curr, obj.limit);
            //首次不执行
            if(!first){
            //do something
                console.log(176);
            }
        }
        });

        })
    </script>

</body>
</html>